<template>
  <el-row>
    <el-col :span="24">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col el-form-s" :model="search" label-position="left" label-width="80px">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item prop="businessCode" label="商家编号">
                <el-input v-model="search.businessCode" placeholder="商家编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="code" label="商家账号">
                <el-input v-model="search.code" placeholder="商家账号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="businessName" label="商家名称">
                <el-input v-model="search.businessName" placeholder="商家名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)">搜索</el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button @click="resetFields" plain>重置</el-button>
            </el-col>

          </el-row>

          <el-collapse-transition>
            <template  v-if="isOpen">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-form-item prop="foundTimeStart" label="注册日期">
                    <el-date-picker
                      placeholder="开始时间"
                      v-model="search.foundTimeStart"
                      type="date"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="foundTimeEnd" label="注册日期">
                    <el-date-picker
                      placeholder="结束时间"
                      v-model="search.foundTimeEnd"
                      type="date"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-collapse-transition>

        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-fahuobao-user/OutGoodsUser/fhbMerchantList"
        :columns="columns">
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {copy} from '@/utils'
export default {
  name: 'sellerAccount',
  data() {
    return {
      isOpen: false,
      searchLoading: false,
      search: {
        businessCode: '',
        code: '',
        businessName: '',
        foundTimeStart: '',
        foundTimeEnd: ''
      },
      columns: [
        {
          label: '商家编号',
          data: 'businessCode'
        },
        {
          label: '商家账号',
          data: 'code'
        },
        {
          label: '商家名称',
          data: 'businessName'
        },
        {
          label: '注册日期',
          data: 'foundTime',
          render(data, full) {
            return unixTimestampFilter(data)
          }
        }
      ],
      tabs: [],
      item: {}
    }
  },
  methods: {
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    }
  }
}
</script>
